@charset "UTF-8";
@import "./common/common";
@import "./components/header";
@import "./components/footer";

.QRcode-container {
  position: relative;
  width: 100%;
  height: 480px;
  height: calc(100vh - 240px);
  background: url("#{$assets-site}/QRcode-bg.png") center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

@media (max-width: $screen-xs-max) {
  .QRcode-container {
    height: 480px * .75;
    height: calc(100vh - 240px);
  }
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .QRcode-container {
    height: 480px * .875;
    height: calc(100vh - 240px);
  }
}

@media (min-width: $screen-md-min) {
  .QRcode-container {
    height: 480px * .9375;
    height: calc(100vh - 240px);
  }
}

@media (min-width: $screen-lg-min) {
  .QRcode-container {
    height: 480px;
    height: calc(100vh - 240px);
  }
}

@media (min-width: $screen-hg-min) {
  .QRcode-container {
    height: 480px * 1.0625;
    height: calc(100vh - 240px);
  }
}

.center-contanier {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 456px;
  height: 200px;
  margin: auto;
  font-size: px2rem(20px);
  text-align: center;
  color: #ffffff;
  p {
    margin-top: 20px;
  }
}

.app {
  float: left;
}

.weixin {
  float: right;
}

.app img, .weixin img {
  width: 148px;
  height: 148px;
}

.footer {
  background-color: #f8f8f8;
}
